<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="examples-styles.css" />
	<style>
		.lyrics {
			font-family: 'Courier New', Courier, monospace;
		}
	</style>

	<title>abcjs: Basic Demo</title>
	<script src="../dist/abcjs-basic.js" type="text/javascript"></script>
	<script type="text/javascript">
		var abc = "T: Cooley's\n" +
			"M: 4/4\n" +
			"L: 1/8\n" +
			"R: reel\n" +
			"K: Emin\n" +
			"|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|\n" +
			"T: Subtitle\n" +
			"w:Here are some ly- rics\n" +
			"EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|\n" +
			"w:Un- der some notes\n" +
			"|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|\n" +
			"eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|";

		function load() {
			var visualObj = ABCJS.renderAbc("paper", abc);
			var words = []
			for (var i = 0; i < visualObj[0].lines.length; i++) {
				var line = visualObj[0].lines[i]
				if (line.staff) {
					for (var j = 0; j < line.staff.length; j++) {
						var staff = line.staff[j];
						for (var k = 0; k < staff.voices.length; k++) {
							var voice = staff.voices[k]
							for (var l = 0; l < voice.length; l++) {
								var element = voice[l]
								if (element.lyric) {
									for (var m = 0; m < element.lyric.length; m++) {
										var lyric = element.lyric[m]
										words.push(lyric.syllable)
									}
								}
							}
						}
					}
				}
			}
			var el = document.querySelector('.lyrics')
			el.innerHTML = words.join("<br>")
			console.log(words)
		}

	</script>
</head>

<body onload="load()">
	<header>
		<img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo">
		<h1>Basic abcjs</h1>
	</header>
	<div class="container">
		<p>This extracts lyrics from a tune</p>
		<div id="paper"></div>
		<p>The lyrics found:</p>
		<div class="lyrics"></div>
	</div>
</body>

</html>